<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">报工单详情</span>
        <ul>
          <li :class="{ active: visiblePayment }">
            <span class="iconfont icon-faqi"></span>
            <a-popover placement="bottom" v-model="visiblePayment" trigger="click">
              <a slot="content" class="cr-content-pop">
                <p @click="hidePop('visiblePayment')">发起验收付款</p>
                <p @click="showModel('visiblePayment')">查看记录</p>
              </a>
              <span>验收付款</span>
            </a-popover>
          </li>
          <li :class="{ active: visibleNotice }">
            <span class="iconfont icon-zhihang"></span>
            <a-popover placement="bottom" v-model="visibleNotice" trigger="click">
              <a slot="content" class="cr-content-pop">
                <p @click="hidePop('visibleNotice')">发起质量通知单</p>
                <p @click="showModel('visibleNotice')">查看记录</p>
              </a>
              <span>质量通知单</span>
            </a-popover>
          </li>
          <li><span class="iconfont icon-shenpi1"></span>合同信息</li>
          <li><span class="iconfont icon-kecheng"></span>核算表</li>
          <li><span class="iconfont icon-wendang"></span>报工日志</li>
        </ul>
        <div class="btn-line">
          <a-button class="hte-btn add-btn" type="primary" @click="onSubmitForm">保存</a-button>
          <a-button class="hte-btn">提交</a-button>
          <a-button class="hte-btn" @click="onResetForm">取消</a-button>
        </div>
      </div>
      <div class="content">
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <section>
            <div class="section-header">报工单信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="报工单编号"> 
                  <a-input v-model="form.projectClass" disabled/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="projectRealName" label="报工类别" prop="projectRealName">
                  <a-select default-value="合同报工">
                    <a-select-option value="合同报工"> 合同报工 </a-select-option>
                    <a-select-option value="合同报工2"> 合同报工 2 </a-select-option>
                    <a-select-option value="合同报工3"> 合同报工 3 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item ref="projectName" label="报工状态" prop="projectName">
                  <a-select default-value="未报工">
                    <a-select-option value="未报工"> 未报工 </a-select-option>
                    <a-select-option value="已报工"> 已报工 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目负责人" prop="keywords">
                  <a-input v-model="form.keywords" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同编号" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同名称" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="报工节点标志" prop="projectRealName">
                  <a-select default-value="合同报工">
                    <a-select-option value="合同报工"> 合同报工 </a-select-option>
                    <a-select-option value="合同报工2"> 合同报工 2 </a-select-option>
                    <a-select-option value="合同报工3"> 合同报工 3 </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同约定日期" prop="projectRealName">
                  <a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="提交资料" prop="projectRealName">
                  <a-input v-model="form.lastProjectNo" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同金额" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item
                  ref="projectRealName"
                  label="工作节点内容"
                  prop="projectRealName"
                >
                  <a-input
                    v-model="form.projectRealName"
                    @blur="
                      () => {
                        $refs.projectRealName.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="关联节点金额" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="16">
                <a-form-model-item
                  ref="projectRealName"
                  label="付款节点内容"
                  prop="projectRealName"
                >
                  <a-input
                    v-model="form.projectRealName"
                    @blur="
                      () => {
                        $refs.projectRealName.onFieldBlur()
                      }
                    "
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item class="row-col-3" label="PO单行号" prop="lastProjectNo">
                  <a-input v-model="form.lastProjectNo">
                    <a-select slot="addonAfter" default-value="10" style="width: 80px">
                      <a-select-option value="10">
                        共10行
                      </a-select-option>
                      <a-select-option value="20">
                        共20行
                      </a-select-option>
                    </a-select>
                  </a-input>                  
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="多个付款条件" prop="projectRealName">
                  <a-input
                    disabled
                    v-model="form.lastProjectNo"
                    :suffix="'共10行'"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="付款节点标识" prop="projectRealName">
                  <a-input v-model="form.lastProjectNo" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="项目经理" prop="projectNo">
                  <a-input v-model="form.hatchProjectName" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="水电费承担" prop="projectNo">
                  <a-radio-group name="radioGroup" :default-value="1">
                    <a-radio :value="1"> 甲方 </a-radio>
                    <a-radio :value="2"> 乙方 </a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="卸货费承担" prop="projectRealName">
                  <div class="disabled-radio">
                  <a-radio-group name="radioGroup" :default-value="2" disabled>
                    <a-radio :value="1"> 甲方 </a-radio>
                    <a-radio :value="2"> 乙方 </a-radio>
                  </a-radio-group>
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
          <ReportInfoTemp header="甲方" key="PartyA">
            <div slot="PartyA">
              <a-row :gutter="24">
                <a-col :span="8">
                  <a-form-model-item label="现场验收日期" prop="projectRealName">
                    <a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="基建造价员" prop="projectRealName">
                    <a-input v-model="form.lastProjectNo" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="甲方报工日期" prop="projectRealName">
                    <a-date-picker valueFormat="YYYY-MM-DD" style="width: 100%" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-form-model-item
                    label="补充说明"
                    prop="projectRealName"
                  >
                    <a-textarea
                      v-model="form.lastProjectNo"
                      disabled
                      placeholder="请输入"
                      :auto-size="{ minRows: 3 }"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </ReportInfoTemp>
          <ReportInfoTemp header="乙方" key="PartyB">
            <div slot="PartyB">
              <a-row :gutter="24">
                <a-col :span="16">
                  <a-form-model-item
                    label="补充说明"
                    prop="projectRealName"
                  >
                    <a-input v-model="form.lastProjectNo" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item ref="projectName" label="乙方报工日期" prop="projectName">
                    <a-date-picker valueFormat="YYYY-MM-DD"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </div>
          </ReportInfoTemp>
        </a-form-model>
      </div>
    </div>
    <a-modal
      v-model="visibleModel"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      :title="modelTitle"
      :footer="null"
      :key="modelFlag"
    >
      <a-table
        class="hte-table-content"
        :columns="modelColumns"
        :data-source="modelData"
        :pagination="modelPagination"
        :loading="modelLoading"
        size="middle"
        bordered
        @change="pageModelChange"
      >
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import '@/config/upload.install.js'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    ReportInfoTemp: () => import('@views/workReport/page/ReportInfoTemp'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      form: {
        id: '',
        projectClass: '10',
        projectNo: '',
        projectName: '',
        mainDeptName: '',
        projectTypeSubCategory: '',
        hatchProjectId: '',
        hatchProjectNo: '',
        hatchProjectName: '',
        lastProjectNo: '',
        lastProjectName: '',
        keywords: '',
        highTechType: '',
        isHighTechProject: false,
        isHighTechProjectText: '',
        projectContent: '',
        projectUseFor: '',
        isNeedEngineeringMotion: null,
        motionProjectNameOrNo: '',
        functionAndPerformance: '',
        sourceBefore: '',
        technologyTarget: '',
        economyTarget: '',
        name: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      rules: {
        keywords: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur',
          },
          { min: 1, max: 127, message: '关键词不超过127个字符', trigger: 'blur' },
        ],
        // 设置必填项
      },
      reservationColumns: [
        {
          title: '附件名称',
          dataIndex: 'taskTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'taskTotal' },
        },
        {
          title: '文件大小',
          dataIndex: 'teamName',
          width: '20%',
          align: 'center',
        },
        {
          title: '上传人',
          dataIndex: 'complet',
          width: '20%',
          align: 'center',
        },
        {
          title: '上传时间',
          dataIndex: 'incompletedT',
          width: '20%',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'delayTotal',
          width: '20%',
          align: 'center',
          scopedSlots: { customRender: 'toAudit' },
        },
      ],
      reservationData: [{ key: 1, id: 1 }],
      selectedRowKeys: [],
      pagination: {
        total: 0,
        current: 1,
      },
      tabLoading: false,
      currPageIndex: 1,
      currPageSize: 10,
      nodeStatusOptions: ['逾期', '正常'],
      fileList: [],
      visiblePayment: false,
      visibleNotice: false,
      visibleModel: false,
      modelColumns: [],
      modelPayColumns: [
        {
          title: '状态',
          dataIndex: 'taskTotal',
          width: '10%',
          align: 'center',
        },
        {
          title: '申请流水号',
          dataIndex: 'teamName',
          width: '15%',
          align: 'center',
        },
        {
          title: '申请人/部门',
          dataIndex: 'completedTotal3',
          width: '20%',
          align: 'center',
        },
        {
          title: '合同名称',
          dataIndex: 'incomplet',
          width: '20%',
          align: 'center',
        },
        {
          title: '采购订单号',
          dataIndex: 'teamName',
          width: '15%',
          align: 'center',
        },
        {
          title: 'PO/行号',
          dataIndex: 'completedTotal4',
          width: '10%',
          align: 'center',
        },
        {
          title: '本次支付金额(含税)',
          dataIndex: 'incompletedTotals',
          width: '10%',
          align: 'center',
        },
      ],
      modelMesyColumns: [
        {
          title: '单据类型',
          dataIndex: 'taskTotal',
          width: '15%',
          align: 'center',
          scopedSlots: { customRender: 'taskTotal' },
        },
        {
          title: '质量通知单',
          dataIndex: 'teamName',
          width: '15%',
          align: 'center',
        },
        {
          title: 'OA流水号',
          dataIndex: 'completedTotalaw',
          width: '15%',
          align: 'center',
        },
        {
          title: '申请人',
          dataIndex: 'incompletedTotal1',
          width: '10%',
          align: 'center',
        },
        {
          title: '合同名称',
          dataIndex: 'teamName',
          width: '20%',
          align: 'center',
        },
        {
          title: '采购订单号',
          dataIndex: 'incompletedTotal2',
          width: '15%',
          align: 'center',
        },
        {
          title: '扣款金额',
          dataIndex: 'teamName',
          width: '10%',
          align: 'center',
        },
      ],
      modelFlag:'',
      modelTitle:'',
      modelData: [],
      modelPagination: {
        total: 0,
        current: 1,
      },
      modelLoading: false,
    }
  },
  mounted() {},
  methods: {
    pageChange() {
      this.currPageIndex = page.current
      this.currPageSize = page.pageSize
      this.pagination.current = page.current
      // this.getConTaskListData()
    },
    handledDelFile(item) {},
    beforUpload() {},
    afterUpload() {},
    handleChange() {},
    hidePop(tar) {
      this[tar] = false
    },
    pageModelChange() {},
    showModel(type) {
      this.visibleModel = true
      this.modelFlag = type;
      if (type == 'visiblePayment') {
        this.modelColumns = [...this.modelPayColumns]
        this.modelTitle = '验收付款单'
      } else {
        this.modelColumns = [...this.modelMesyColumns]
        this.modelTitle = '质量通知单'
      }
      this.hidePop(type)
    },
    onSubmitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onResetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.cr-content-pop {
  p {margin-bottom: 15px;color: #666;
    &:hover{color: @bg-color-btn;}
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
